<template>
  <div class="baseInfo">
    <vxe-table
      border
      stripe
      ref="tableRef"
      size="small"
      header-align="center"
      :data="tableData"
    >
      <vxe-column type="seq" width="70" align="center" fixed="left"></vxe-column>
      <vxe-column field="warehouseName" show-overflow="title" align="center" title="仓库名称"></vxe-column>
      <vxe-column field="itemCode" show-overflow="title" align="center" title="商品代码"></vxe-column>
      <vxe-column field="specification" show-overflow="title" align="center" title="规格代码？"></vxe-column>
      <vxe-column field="specification" show-overflow="title" align="center" title="规格名称"></vxe-column>
      <vxe-column field="availableQty" show-overflow="title" align="center" title="可配数？"></vxe-column>
      <vxe-column field="quantityOnhand" show-overflow="title" align="center" title="库存数"></vxe-column>
      <vxe-column field="inTransitQty" show-overflow="title" align="center" title="在途数？"></vxe-column>
    </vxe-table>  

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { getPrepareItemsStock } from "@/api/mes/sales/prepare";
export default {
  name: 'baseInfo',
  props: {
    cellId: undefined,
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      total: 0,
    }
  },
  watch: {
    cellId: {
      immediate: true,
      handler(val) {
        if (val && val !== 'add') {
          this.getList();
        } else {
          this.tableData = [];
        }
      },
    }
  },
  methods: {
    getList() {
      getPrepareItemsStock(this.cellId).then(response => {
        this.tableData = response.data || [];
        this.total = response.total || 0;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.baseInfo{
  &-header{
    margin-bottom: 10px;
  }
}
</style>